<template>
  <div class="big">
      <div class="box">


          <div class="search flex">
              <div class="search_left flex">
                  <div class='iconfont icon-search' style="float:left"></div>
                  <input class="input" type="text" :placeholder="defaultKeyword.keyword" v-model="inputKeyword"
                      @change="getKeyLists">
              </div>
                  <div class="cancle" @click="goToDel">取消</div>
          </div>



          <div class="center" v-if="!inputKeyword">
              <h3 class="hot_search">热门搜索</h3>
              <div class="list">
                  <a class="item " :class="{ 'light': index == 0 }" v-for="(item, index) in hotKeywordVOList"
                      :key="index">{{ item.keyword }}</a>
              </div>
          </div>

          <div class="keylist" v-else>
              <div class="keyitem" v-for="(item, index) in keylist" :key="index">
                  <div class="kettext">{{ item }}</div>
                  <i class='iconfont icon-xiangyoujiantou'></i>
              </div>
          </div>


      </div>
  </div>
</template>

<script setup lang="ts">
import Api from '@/api/sort'
import { onMounted } from 'vue'
import { ref, watch } from 'vue'
import { useRoute, useRouter } from "vue-router";
const router = useRouter();


// 输入框关键字
const inputKeyword = ref('')

// 热门搜索
const hotKeywordVOList = ref([])
// 搜索关键字
const defaultKeyword = ref([])
// 搜素关键字列表
const keylist = ref([])

const getSearch = async () => {
  try {
      let result = await Api.getSearch()
      // console.log(result)
      // 热门搜索
      hotKeywordVOList.value = result.hotKeywordVOList
      // 搜索关键字
      defaultKeyword.value = result.defaultKeyword

  } catch (error) {
      console.log(error)
  }
}

// 搜素关键字列表
const getKeyList = async () => {
  try {
      let result = await Api.getSearch(inputKeyword.value)
      console.log('result', result)
      keylist.value = result
  } catch (error) {
      console.log(error)
  }
}

// 输入框change事件
const getKeyLists = () => {
  getKeyList()
}

onMounted(() => {
  getSearch()
})

watch(inputKeyword, () => {
  getKeyList()
})

//回退上一级
const goToDel =()=>{
  router.back()
}
</script>

<style scoped>
.flex {
  display: flex;
}

.big {
  background: #eee;
  height: 100%;
}

.box {
  background: #fff;
}

.topImg {
  width: 100%;
  height: 52px;
}



.search {
  height: 44px;
  padding: 0 15px;
}

.search_left {
  background: #f4f4f4;
  padding: 0 10px;
  height: 28px;
  margin-top: 8px;
}

.iconfont {
  margin-right: 8px;
  margin-top: 3px;
}

.input {
  font-size: 14px;
  color: #666;
  background: #f4f4f4;
  width: 250px;
  border: #666;
}

.cancle {
  font-size: 14px;
  margin-left: 15px;
  margin-top: 8px;
}


/** v-if 内容**/
.center {
  background: #fff;
  height: 141px;
  margin-bottom: 10px;
  padding: 0 15px 15px;
}

.hot_search {
  color: #999;
  font-size: 14px;
  float: left;
}


.list {
  margin: 0px -15px -16px 0px;
  width: 360px;
  height: 82px;
  float: left;
}

.list .light {
  border: 1px solid #dd1a21;
  color: #dd1a21;
}

.item {
  font-size: 12px;
  padding: 0 7.5px;
  margin: 0 16px 16px 0;
  border: 1px solid #999;
  line-height: 23px;
  border-radius: 4px;
  float: left;
}

a {
  text-decoration: none;
  outline: none;
  color: black;
}


/** v-else 内容**/
.keylist {
  padding-left: 5px;
}

.keyitem {
  height: 52px;
  margin-left: 15px;
  border-bottom: 1px solid #eee;
}

.kettext {
  font-size: 14px;
  float: left;
  margin-top: 15px;
}

.keyitem>.iconfont {
  float: right;
}




.history {
  height: 100px;
  padding: 0 15px 15px;
  margin: 0 0 10px;
  border-bottom: 10px solid #eee;
}

.history_header {
  height: 45px;
}

.history_text {
  font-size: 14px;
  color: #999;
  float: left;
  margin-top: 10px;
}

.history_header .iconfont {
  float: right;
  width: 27px;
  height: 27px
}


.history_border {
  border: 1px solid #999;
  height: 24px;
  padding: 0 7.5px;
  border-radius: 4px;
  margin-right: 15px;
  margin-bottom: 15px;
  float: left;
}

.history_item {
  font-size: 12px;
  float: left;
  margin-top: 4px;
}</style>